import React, { Component } from 'react';
import { View, Text, StatusBar, Image ,TouchableOpacity} from 'react-native';
import { pxToDp } from '../../../utils/stylesKits'
import Friendhead from '../components/friendhead'
import Vistors from '../components/vistors'
import PerfectGirl from '../components/perfectGirl'
import request from '../../../utils/request'
import IconFonts from '../../../components/IconFonts'
import { Overlay } from 'teaset'
import { FRIENDS_RECOMMENDATION, BASE_URI } from '../../../utils/pathMap'
import FilterPanel from '../components/filterPanel'
import {NavigationContext} from '@react-navigation/native'


import HeaderImageScrollView from 'react-native-image-header-scroll-view';

class Index extends Component {
  static contextType = NavigationContext;
  state = {
    params: {
      page: 1,
      pagesize: 10,
      gender: '女',
      distance: 2,
      lastLogin: '',
      city: '',
      education: ''
    },
    recomments: []
  }
  componentDidMount () {
    this.getRecommends();
  }
  // 获取数据
  getRecommends = async (filterParams = {}) => {
    console.log('1111' + JSON.stringify({ ...this.state.params, ...filterParams }))
    const res = await request.privateGet(FRIENDS_RECOMMENDATION, { ...this.state.params, ...filterParams })
    this.setState({ recomments: res.data });
    console.log(res.data)
  }
  // 显示筛选浮层
  recommendFiltershow = () => {
    // 获取需要传递的数据
    const { page, pagesize, ...others } = this.state.params
    let overlayViewRef = null
    let overlayView = (
      <Overlay.View
        modal={true}
        overlayOpacity={0.3}
        ref={v => overlayViewRef = v}
      >
        {/* 筛选组件 */}
        <FilterPanel onSubmitFilter={this.handleSubmitFilter} params={others} onClose={() => overlayViewRef.close()} />
      </Overlay.View>
    );
    Overlay.show(overlayView);
    // overlayViewRef.close();
  }
  // 接收到了筛选组件传过来的参数 提交事件
  handleSubmitFilter = (filterParams) => {
    // console.log(filterParams)
    this.getRecommends(filterParams)

  }
  render () {
    const { recomments } = this.state
    return (
      <HeaderImageScrollView
        maxHeight={pxToDp(130)}
        minHeight={pxToDp(44)}
        headerImage={require("../../../res/headfriend.png")}
        renderForeground={() => (
          <View style={{ height: pxToDp(130), justifyContent: "center", alignItems: "center" }} >
            <StatusBar backgroundColor={"transparent"} translucent={true} />
            <Friendhead />
          </View>
        )}
      >
        <View style={{ height: 1000 }}>
          {/* 访客 */}
          <Vistors />
          {/* 今日佳人 */}
          <View style={{ height: pxToDp(3), backgroundColor: "#ccc" }}></View>
          <PerfectGirl />
          {/* 推荐 */}
          <View>
            <View style={{ height: pxToDp(40), backgroundColor: "#eee", paddingLeft: pxToDp(10), paddingRight: pxToDp(10), flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
              <Text style={{ color: "#666" }}>推荐</Text>
              {/* 筛选模块 */}
              <IconFonts onPress={this.recommendFiltershow} style={{ color: "#666" }} name="iconshaixuan" />
            </View>
            {/* 列表内容 */}
            <View>
              {
                recomments.map((v, i) => <TouchableOpacity 
                onPress={()=>this.context.navigate("Detail",{id:v.id})}
                key={i} style={{ flexDirection: "row", paddingTop: pxToDp(15), paddingBottom: pxToDp(15), borderBottomWidth: pxToDp(1), borderColor: "#ccc" }}>
                  <View style={{ paddingLeft: pxToDp(15), paddingRight: pxToDp(15) }}>
                    <Image style={{ width: pxToDp(50), height: pxToDp(50), borderRadius: pxToDp(25) }} source={{ uri: BASE_URI + v.header }} />
                  </View>
                  {/* 名称 */}
                  <View style={{ flex: 4, justifyContent: "space-around" }}>
                    <View style={{ flexDirection: 'row', alignItems: "center" }}>
                      <Text style={{ color: "#555" }}>{v.nick_name}</Text>
                      <IconFonts style={{ fontSize: pxToDp(18), color: v.gender === "女" ? "#b564bf" : "red" }}
                        name={v.gender === "女" ? "icontanhuanv" : "icontanhuanan"} />
                      <Text style={{ color: "#555" }}>{v.age}岁</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                      <Text style={{ color: "#555" }}>{v.marry}</Text>
                      <Text style={{ color: "#555" }}>|</Text>
                      <Text style={{ color: "#555" }}>{v.xueli}</Text>
                      <Text style={{ color: "#555" }}>|</Text>
                      <Text style={{ color: "#555" }}>{v.agediff < 10 ? '年龄相仿' : '有点代沟'}</Text>
                    </View>
                  </View>
                  <View style={{ flexDirection: "row", alignItems: "center", width: pxToDp(100), justifyContent: "center" }}>
                    <IconFonts style={{ color: "red", fontSize: pxToDp(30) }} name="iconxihuan" />
                    <Text style={{ color: "#666", fontSize: pxToDp(12) }}>{v.fateValue}</Text>
                  </View>
                </TouchableOpacity>)
              }
            </View>
          </View>
        </View>
      </HeaderImageScrollView>
    );
  }
}
export default Index;
